/**
 * string类型的值显示
 */
Vue.component("string", {
    template :
        `
        <div>
            <i-table highlight-row :columns="columns" :data="dealValue"/>
            <Modal v-model="asJson" title="json格式显示...">
                <pre style="white-space: pre-wrap;word-wrap: break-word;">{{asJsonText}}</pre>
            </Modal>
            <Modal v-model="asEdit" title="数据编辑...">
                <Input v-model="data.newValue" type="textarea" :autosize="{minRows: 5, maxRows: 10}" placeholder="请输入..."/>
                <div slot="footer">
                    <i-button type="primary" @click="editSubmit">提交</i-button>
                    <i-button type="ghost" @click="editCancel" style="margin-left: 8px">取消</i-button>
                </div>
            </Modal>
            <input type="hidden" id="copyValue">
        </div>
        `,
    props : ["data"],
    data : function() {
        return {
            columns: [
                {
                    title: "值",
                    key: "value",
                    render: (h, params) => {
                        return h("Poptip", {
                            props : { trigger : "hover", placement : "top-start" },
                            style : { padding : "2px 0px 2px 0px" }
                        }, [
                            h("div", params.row.value),
                            h("div", {
                                slot : "content"
                            }, [
                                h("i-button", {
                                    props : { type : "text", size : "small" },
                                    on : {
                                        click : () => {
                                            this.showAsJson();
                                        }
                                    }
                                }, "以json格式查看"),
                                h("i-button", {
                                    props : { type : "text", size : "small" },
                                    on : {
                                        click : () => {
                                            this.toCopy();
                                        }
                                    }
                                }, "复制"),
                                h("i-button", {
                                    props : { type : "text", size : "small" },
                                    on : {
                                        click : () => {
                                            this.toEdit();
                                        }
                                    }
                                }, "编辑")
                            ])
                        ]);
                    }
                }
            ],
            asJson: false,
            asJsonText: "",
            asEdit: false
        };
    },
    methods : {
        showAsJson: function () {
            this.asJson = true;
            var tempValue;
            try {
                tempValue = JSON.parse(this.data.value);
            }catch (e){
                tempValue = this.data.value;
            }
            this.asJsonText = tempValue;
        },
        toCopy : function () {
            var copyValue = this.$el.children.copyValue;
            copyValue.setAttribute("data-clipboard-text", this.data.value);
            copyValue.click();
        },
        toEdit : function () {
            this.data.newValue = this.data.value;
            this.asEdit = true;
        },
        editSubmit : function () {
            this.data.value = this.data.newValue;
            this.asEdit = false;
            this.$emit("updateKey", this.data);
        },
        editCancel : function () {
            this.asEdit = false;
        }
    },
    computed : {
        dealValue : function () {
            return [{
                value : this.data.value
            }];
        }
    },
    created : function () {
        var that = this, clipboard = new Clipboard("#copyValue");
        clipboard.on("success", function(e) {
            that.$Message.success("复制成功...");
        });
        clipboard.on("error", function(e) {
            that.$Message.error("复制失败...");
        });
    }
});